<template>
  <div class="header-logo">
    <div class="flexBox">
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss">
.header-logo {
  height: 55px;
  width: 55px;
  overflow: hidden;
  position: relative;
  &:hover {
    .flexBox {
      left: -55px;
    }
  }
  .flexBox {
    transition-duration: 0.5s;
    position: absolute;
    width: 200%;
    height: 100%;
    background-color: #ff6600;
    display: flex;
    left: 0;
    div {
      width: 55px;
      height: 55px;
      &:first-child {
        background-image: url(../../public/img/mi-logo.png);
        background-size: cover;
      }
      &:nth-child(2) {
        background-image: url(../../public/img/mi-home.png);
        background-size: cover;
      }
    }
  }
}
</style>